<template>
	<div>
		<div  class="top-wrap">
			<el-row :gutter="20">
				<el-col :span="8">
				<div class="wrap-li">
						<div class="header">概况</div>
						<div class="mt20">
							<el-row class="top-wrap-content tx-c plr10" :gutter="20">
								<el-col :span="8">
									<div class="item">
										<span class="bg-p1"></span>
										<h5 class="mb10 ">电压等级</h5>
										<p>10 <em>KV</em></p>
									</div>
								</el-col>
								<el-col :span="8">
									<div class="item">
										<span class="bg-p2"></span>
										<h5 class="mb10 ">电压等级</h5>
										<p>10 <em>KV</em></p>
									</div>
								</el-col>
								<el-col :span="8">
									<div class="item">
										<span class="bg-p3"></span>
										<h5 class="mb10 ">电压等级</h5>
										<p>10 <em>KV</em></p>
									</div>
								</el-col>
								<el-col :span="8">
									<div class="item">
										<span class="bg-p4"></span>
										<h5 class="mb10 ">电压等级</h5>
										<p>10 <em>KV</em></p>
									</div>
								</el-col>
								<el-col :span="8">
									<div class="item">
										<span class="bg-p5"></span>
										<h5 class="mb10">电压等级</h5>
										<p>10 <em>KV</em></p>
									</div>
								</el-col>
								<el-col :span="8">
									<div class="item">
										<span class="bg-p6"></span>
										<h5 class="mb10 ">电压等级</h5>
										<p>10 <em>KV</em></p>
									</div>
								</el-col>
							</el-row>
						</div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="wrap-li">
						<div class="header">运行状态</div>
						<div class="top-wrap-tips mlr10">更新时间:2019-06-22 15:50:00</div>
						<div class="mt20">
							<el-row class="tx-c plr10 top-wrap-content2" :gutter="20">
								<el-col :span="6">
									<div class="item">
										<span class="bg-p1"></span>
										<h5 class="mb10 ">电压等级</h5>
										<p class="fz30">10<em class="fz12">KV</em></p>
									</div>
								</el-col>
								<el-col :span="6">
									<div class="item">
										<span class="bg-p2"></span>
										<h5 class="mb10 ">电压等级</h5>
										<p class="fz30">10<em class="fz12">KV</em></p>
									</div>
								</el-col>
								<el-col :span="6">
									<div class="item">
										<span class="bg-p3"></span>
										<h5 class="mb10 ">电压等级</h5>
										<p class="fz30">10<em class="fz12">KV</em></p>
									</div>
								</el-col>
								<el-col :span="6">
									<div class="item">
										<span class="bg-p4"></span>
										<h5 class="mb10 ">电压等级</h5>
										<p class="fz30">10<em class="fz12">KV</em></p>
									</div>
								</el-col>
								
							</el-row>
						</div>
						<ul class="cir clear">
							<li class="fl">
								<figure>
									<div class="run-bg" id="run1">
										<img src="http://www.acrelcloud.cn/SubstationWEB/app/image/run1.png">
									</div>
									<div class="run-p ">
										<p  id="run2">配电图</p>
									</div>
									<div class="img-hover">
										<h4>配电图</h4>
									</div>
								</figure>	
							</li>
							<li class="fl">
								<figure>
									<div class="run-bg" id="run1">
										<img src="http://www.acrelcloud.cn/SubstationWEB/app/image/run2.png">
									</div>
									<div class="run-p ">
										<p  id="run2">视频</p>
									</div>
									<div class="img-hover">
										<h4>视频</h4>
									</div>
								</figure>	
							</li>
							<li class="fl">
								<figure>
									<div class="run-bg" id="run1">
										<img src="http://www.acrelcloud.cn/SubstationWEB/app/image/run3.png">
									</div>
									<div class="run-p ">
										<p  id="run2">变压器</p>
									</div>
									<div class="img-hover">
										<h4>变压器</h4>
									</div>
								</figure>	
							</li>
							<li class="fl">
								<figure>
									<div class="run-bg" id="run1">
										<img src="http://www.acrelcloud.cn/SubstationWEB/app/image/run4.png">
									</div>
									<div class="run-p ">
										<p  id="run2">通讯</p>
									</div>
									<div class="img-hover">
										<h4>通讯</h4>
									</div>
								</figure>	
							</li>
						</ul>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="wrap-li pb30">
						<div class="header">当日事件记录</div>
						<div class="top-wrap-tips mlr10">更新时间:2019-06-22 15:50:00</div>
						<div class="mt20">
							<el-row class="tx-c plr10 top-wrap-content2 " :gutter="20">
								<el-col :span="8">
									<div class="item">
										<span class="bg-p5"></span>
										<h5 class="mb10">电压等级</h5>
										<p class="fz30">10<em class="fz12">KV</em></p>
									</div>
								</el-col>
								<el-col :span="8">
									<div class="item">
										<span class="bg-p6"></span>
										<h5 class="mb10">电压等级</h5>
										<p class="fz30">10<em class="fz12">KV</em></p>
									</div>
								</el-col>
								<el-col :span="8">
									<div class="item">
										<span class="bg-p7"></span>
										<h5 class="mb10">电压等级</h5>
										<p class="fz30">10<em class="fz12">KV</em></p>
									</div>
								</el-col>
							</el-row>
						</div>
						<div class="mt20">
							<img style="width:100%;" src="http://www.acrelcloud.cn/SubstationWEB/app/image/box3.png" alt="">
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="top-wrap pt20">
			<el-row :gutter="20">
				<el-col :span="16">
					<div class="wrap-li">
						<div class="header">当日逐时用电曲线(单位：kW.h)</div>
						<div class="bgff" id="myChart" :style="{width: '100%', height: '360px'}"></div>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="wrap-li">
						<div class="header">用电概况</div>
						<ul class="yd">
							<li class="clear ptb10">
								<span class="box5-1" id="newDMY">当日用电</span>
								<span id="triangle-right"></span>
								<span id="todayTotal" class="box5-1b">1146 kW·h</span>
							</li>
							<li class="clear ptb10">
								<span class="box5-1 box5-2" id="newDMY">昨日同期</span>
								<span id="triangle-right" class="tr2"></span>
								<span id="todayTotal" class="box5-1b box5-2b">1146 kW·h</span>
							</li>
							<li class="clear ptb10">
								<span class="box5-1 box5-3" id="newDMY">当日用电</span>
								<span id="triangle-right" class="tr3"></span>
								<span id="todayTotal" class="box5-1b box5-3b">1470 kW·h</span>
							</li>
							<el-row class="box-5c tx-c pt20 fz12">
								<el-col :span="12">
									<p class="fz20">06:15-06:30</p>
									<p>最大用电时间</p>
								</el-col>
								<el-col :span="12">
									<p class="fz20">104 kW</p>
									<p>该时段平均功率</p>
								</el-col>
							</el-row>	
						</ul>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>

export default {
  name: "card",
  data() {
    return {
        legendDrawData: [
            "今日",
            "昨日"
		],
		startTime:"2019-06-09 00:00:00",
		endTime:"2019-06-09 24:00:00",
    };
  },
   mounted(){
	this.drawBar();
	
  },
    methods: {
        drawBar() {
			let myChart = this.$echarts.init(document.getElementById("myChart"));
			let option = {
				
				tooltip: {
				trigger: "axis"
				},
				legend: {
				data: this.legendDrawData,
				bottom: 0
				},
				grid: {
				left: "3%",
				right: "4%",
				bottom: "6%",
				containLabel: true
				},
				toolbox: {
				feature: {
					saveAsImage: {}
				}
				},
				xAxis: {
				type: "category",
				boundaryGap: false,
				data: ["1", "2", "3", "4", "5", "6", "7"]
				},
				yAxis: {
				type: "value"
				},
				series: [
				{
					name: this.legendDrawData[0],
					type: "line",
					stack: "总量1",
					data: [2, 5, 6, 8, 9, 4, 1],
					lineStyle: {
					normal: {
						color: "#41b508",
						width: 2
					}
					}
				},
				{
					name: this.legendDrawData[1],
					type: "line",
					stack: "总量2",
					data: [0.1, 0.9, 0.4, 0.4, 0.6, 0.6, 0.7],
					lineStyle: {
					normal: {
						color: "#1185aa",
						width: 2
					}
					}
				}
				]
			};
			myChart.setOption(option);
		}
    }
};
</script>

<style lang="scss">

.top-wrap {
	.el-row{
		margin:0!important;
	}
	.wrap-li {
		background: #fff;
		.header {
			background: #3db3ff;
			color: #fff;
			font-size: 14px;
			padding: 10px;
		}
		.top-wrap-tips{
			padding: 5px;
			height: 31px;
			line-height: 31px;
			background: #F4F4F4;
		}
		.top-wrap-content{
			.item{
				border: 1px solid #DCDCDC;
				margin-bottom:20px;
				span {
					width: 100px;
					height: 46px;
					margin: 8px 0 8px 0;
					display: inline-block;
					background: url(http://www.acrelcloud.cn/SubstationWEB/app/image/main-box1.png) no-repeat;
					&.bg-p1{
						background-position: 19px 9px;
					}
					&.bg-p2{
						background-position: -107px 5px;
					}
					&.bg-p3{
						background-position: -524px 0;
					}
					&.bg-p4{
						background-position: -225px -1px;
					}
					&.bg-p5{
						background-position: -344px -2px;
					}
					&.bg-p6{
						background-position: -450px 0;
					}
				}
				p{
					background: #5D676F;
					color: #FFF;
					font-size: 22px;
					height: 50px;
					line-height: 50px;
				}
			}
		}
		.top-wrap-content2{
			.item{
				span{
					width: 80px;
					height: 80px;
					border-radius: 50%;
					display: inline-block;
					background: url(http://www.acrelcloud.cn/SubstationWEB/app/image/main-box2.png) no-repeat;
					&.bg-p1{
						background-color: #F6684E;
    					background-position: 21px 17px;
					}
					&.bg-p2{
						background-color: #36CF89;
    					background-position: -74px 17px;
					}
					&.bg-p3{
						background-color: #FFA73C;
    					background-position: -161px 17px;
					}
					&.bg-p4{
						background-color: #3EBCF8;
    					background-position: -242px 17px;
					}
					&.bg-p5{
						background-color: #74B2FD;
    					background-position: -333px 17px;
					}
					&.bg-p6{
						background-color: #F6C721;
    					background-position: -419px 17px;
					}
					&.bg-p7{
						background-color: #F6684E;
    					background-position: -507px 17px
					}
				}
				p{
					font-family: Arial;
					font-weight: bold;
				}
			}
		}
		.cir {
			margin-top: 20px;
			li {
				width: 25%;
				border-right:1px solid #fff;
				box-sizing: border-box;
				&:last-child{
					border-right:none;
				}
				figure{
					margin: 0;
					-webkit-backface-visibility: hidden;
					-moz-backface-visibility: hidden;
					-ms-backface-visibility: hidden;
					backface-visibility: hidden;
					-webkit-transition: all 0.5s;
					-moz-transition: all 0.5s;
					-ms-transition: all 0.5s;
					-o-transition: all 0.5s;
					transition: all 0.5s;
	   			 	position: relative;
				}
				.run-bg {
					display: block;
					z-index: 10;
					position: relative;
					width: 100%;
					height: 5em;
					background-color: #5D676F;
					border-right: 1px solid #B5B5B6;
					text-align: center;
					img{
						padding-top: 21px;
					}
				}
				.run-p {
					display: block;
					position: relative;
					z-index: 15;
					width: 100%;
					height: 3em;
					background-color: #7d848c;
					border-right: 1px solid #B5B5B6;
					p{
						text-align: center;
						color: #fff;
						padding-top: 16px; 
					}
				}
				.img-hover {
					z-index: 5;
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 8em;
					text-align: center;
					background-color: #ffa73c;
					-webkit-backface-visibility: hidden;
					-moz-backface-visibility: hidden;
					-ms-backface-visibility: hidden;
					backface-visibility: hidden;
					-webkit-transform: rotateY(-180deg);
					-moz-transform: rotateY(-180deg);
					-ms-transform: rotateY(-180deg);
					transform: rotateY(-180deg);
					-webkit-transition: all 0.5s;
					-moz-transition: all 0.5s;
					-ms-transition: all 0.5s;
					-o-transition: all 0.5s;
					transition: all 0.5s;
				}
			}
		}
	}
}
.yd{
	li{
		position: relative;
		.box5-1 {
			width: 40%;
			display: inline-block;
			float: left;
			padding: 22px 0 22px 0;
			margin-right: -8px;
			text-align: center;
			color: #FFF;
			background: #b4a3e9;
			border-radius: 10px;
			&.box5-2 {
				background: #2dc4d9;
			}
			&.box5-3 {
				background: #92D400;
			}
		}
		#triangle-right {
			width: 0;
			height: 0;
			border-left: 18px solid #b4a3e9;
			border-top: 15px solid transparent;
			border-bottom: 15px solid transparent;
			position: absolute;
			top: 28px;
			left: 39%;
			&.tr2 {
				border-left-color: #2dc4d9;
			}
			&.tr3 {
				border-left-color: #92D400;
			}
		}
		.box5-1b {
			box-sizing: border-box;
			width: calc(60% + 8px);
			font-size: 25px;
			padding: 15px 0 15px 45px;
			display: inline-block;
			float: left;
			border-radius: 0 10px 10px 0;
			background: rgba(180, 163, 233, 0.1);
			border: 1px solid rgba(180, 163, 233, 0.5);
			&.box5-2b{
				background: rgba(45, 196, 217, 0.1);
    			border: 1px solid rgba(45, 196, 217, 0.3);
			}
			&.box5-3b{
				background: rgba(146, 212, 0, 0.1);
    			border: 1px solid rgba(146, 212, 0, 0.3);
			}
		}
	}
	.box-5c{
		background: #5D676F!important;
		overflow: hidden;
		margin-top: 8px;
		height: 89px;
		// line-height: 89px;
		color:#fff;
	}
}
</style>
